import { Button, Form, Modal, Table } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { useMemo, useState } from "react";
import { Fields } from "../../Component/ResourceList/Fields";
import { createFields } from "@/pages/Admin/Component/ResourceList/Edit";
import Video from "../../Component/Video";


interface IVideoInfo {
    label: string;
    value: string;
    index?: number;
}

const Videos = ({ value, onChange, disabled, description, validate}: any) => {
    const [ form ] = Form.useForm();
    const [ videoList, setVideoList  ] = useState<IVideoInfo[]>(value ||[]);
    const [ editState, setEditState ] = useState({
        show: false,
        data: {} as Partial<IVideoInfo>
    });
    const [ videoState, setVideoState ] = useState({
        show: false,
        videoId: ""
    });
    const formItemFiels = useMemo(() => {
        return createFields([
            {
                label: "视频标题",
                name: "label",
                type: "Input",
                required: true,
                props: {
                    placeholder: "请输入视频标题"
                }
            }, {
                label: "视频文件",
                name: "value",
                type: "Cover",
                required: true,
                props: {
                    filterType: "video",
                    btnText: "上传视频",
                    validate
                }
            }
        ]);
    },[validate]);
    const columns = useMemo(() =>([{
        title: "视频文件",
        dataIndex: "label",
        render: (_: string, data: any) => {
            return (<a onClick={()=>{console.log(data.value);
                setVideoState({
                    show: true,
                    videoId: data.value?.id || data.value
                });
            }}>{data.label}</a>);
        }
    }, {
        title: "操作",
        width: 80,
        dataIndex: "index",
        render: (v: string, data: any) => {
            return (
                <>
                    <Button type="dashed" size="small" onClick={() => {
                        const newList = videoList.filter((item) => item.index !== data.index);
                        setVideoList(newList);
                        typeof onChange === "function" && onChange(newList);
                    }} >删除</Button>
                </>
            );
        }
    }]), [videoList]);
    return (<div>
        <Button icon={<UploadOutlined />} onClick={() => {
            console.log(form);
            form.setFieldsValue({
                label: "",
                value: "",
                index: null
            });
            setEditState({
                show: true,
                data: {}
            });
        }}>上传视频</Button>
        { description && <div>{description}</div> }
        <Table
            columns={columns}
            dataSource={videoList}
        />
        {
            editState.show && (
                <Modal
                    open
                    centered
                    title="编辑视频"
                    onCancel={() => setEditState({show: false, data: {}})}
                    onOk={() => { 
                        form.validateFields().then((values) =>{
                            let hasUpdate = false;
                            const newList = [...videoList];
                            for(const item of newList) {
                                if(item.index === values.index) {
                                    item.label = values.label;
                                    item.value = item.value;
                                    hasUpdate = true;
                                }
                            }

                            !hasUpdate && newList.push({...values});
                            setVideoList(newList);
                            setEditState({
                                show: false,
                                data: {}
                            });
                            typeof onChange === "function" && onChange(newList);
                        }).catch((err) => console.error(err));
                    }}
                >
                    <Form
                        labelCol={{ span:  5 }}
                        wrapperCol={{ span: 16 }}
                        layout="horizontal"
                        // disabled={componentDisabled}
                        form={form}
                        initialValues={editState.data}
                    >
                        <Fields form={form} fields={formItemFiels as any[]} disabled={disabled} data={{}} />
                        <div style={{ height: 0, opacity: 0}}>
                            <Form.Item name="index"/>
                        </div>
                    </Form>
                </Modal>
            )
        }
        {
            videoState.show && (
                <Modal
                    title="视频播放"
                    open
                    centered
                    width={800}
                    height={600}
                    onCancel={() => {
                        setVideoState({ show: false, videoId: "" });
                    }}
                    okButtonProps={{
                        "style": { display: "none" }
                    }}
                >
                    <Video videoId={videoState.videoId}/>
                </Modal>
            )
        }
    </div>);
};

export default Videos;
